// 定义懒加载插件
// 导入vueUse
import { useIntersectionObserver } from "@vueuse/core"

export const lazyPlugin = {
  install(app) {
    // 懒加载指令逻辑
    app.directive('img-lazy', {
      mounted(el, binding) {
        // el:指令绑定的元素，binding:指令提供的信息
        // console.log(el, binding);

        // 监听图片是否进入可视区域
        // 解构stop方法,让监视一次后停止
        const { stop } = useIntersectionObserver(
          el,
          // 判断是否进入可视区域（isIntersecting是布尔值）
          ([{ isIntersecting }]) => {
            // console.log(isIntersecting);
            if (isIntersecting) {
              // 进入了可视区域
              el.src = binding.value
              stop()
            }
          }
        )
      }
    })
  }
}